<template>
	<div>
        <index-header v-if="islogin" class="topHeader"></index-header>
        <!-- banner -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in bannerImages" v-bind:style="{backgroundImage: 'url(' + item.img + ')'}" @click="go()" :key="item.id"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- 公告 -->
        <div class="platform">
            <div class="platform-marquee">
                <div class="swiper-container platform-marquee-container">
                    <!-- <div> -->
                        <ul class="swiper-wrapper">
                            <li class="swiper-slide swiper-no-swiping ellipsis" v-for="item in platformDatas" @click="openUrl(item.url,item.title )" :key="item.id">{{item.title}}</li>
                        </ul>
                    <!-- </div> -->
                </div>
            </div>
            <div class="platform-advantage">
                <div>
                    <img src="../../../assets/images/ico-01(App).png" alt="">
                    <h4>公司担保</h4>
                    <h6>项目审核严格</h6>
                </div>
                <div>
                    <img src="../../../assets/images/ico-02(App).png" alt="">
                    <h4>理财管家</h4>
                    <h6>100元起投</h6>
                </div>
                <div>
                    <img src="../../../assets/images/ico-03(App).png" alt="">
                    <h4>免费体验</h4>
                    <h6>不收手续费</h6>
                </div>
                <div>
                    <img src="../../../assets/images/ico-04(App).png" alt="">
                    <h4>快速赎回</h4>
                    <h6>资金随用随取</h6>
                </div>
            </div>
        </div>
        <!-- 首页推荐标 -->
        <div :class="['item-recommend',{hot:recommandDatas.is_hot}]">
            <div class='title'>
            <img :src="recommandDatas.bt_img" alt="">
            <span>{{recommandDatas.b_projecttitle}}</span>
            <img src="../../../assets/images/icon_phone.png" alt="" v-if="recommandDatas.canrsecoupon">
            <img src="" alt="" v-if="recommandDatas.b_assignbiddding">
            </div>
            <div class='detail-info'>
            <canvas id='canvas' v-bind:data-value="recommandDatas.progress" height=300 widht=300></canvas>
            <p class='progress'>进度：<small>{{recommandDatas.progress}}%</small></p>
            <p class='shouyilv'>预期年化收益率</p>
            <p class='shouyilv-num'>
                <i>{{recommandDatas.Rate}}</i><em>%</em>+
                <i v-if="recommandDatas.IncreasedRate">{{recommandDatas.IncreasedRate}}</i>
            </p>
            <p class='time'>期限<span>{{recommandDatas.loandeadline}}</span></p>
            </div>
            <div class="item-recommend-pay">
            <ul class='aui-clearfix'>
                <li>
                <h2>{{recommandDatas.b_need_loan}}</h2>
                <p>借款金额</p>
                </li>
                <li>
                <h2>{{recommandDatas.b_can_cast_loan}}</h2>
                <p>可投金额</p>
                </li>
            </ul>
            <a href="">立即投标</a>
            </div>
        </div>
        <footer></footer>
	</div>
</template>

<script>
    import indexHeader from 'components/common/indexHeader.vue';
    import Swiper from 'lib/swiper.js';
    import {openUrl} from 'lib/public.js';
    import {drawCircle} from 'lib/indexAnimation.js';

    let banner;
    let platform;

    export default {
    	data(){
            return{
                islogin:true,
            	bannerImages:[
                    {'img':'https://www.51jili.com/attachment/display/3378'},
                    {'img':'https://www.51jili.com/attachment/display/3357'},
                    {'img':'https://www.51jili.com/attachment/display/3345'}
                ],
                platformDatas:[
                    {'title':'123','url':'http://mp.weixin.qq.com/s/lgSquXMHI82C8oNnB4hBUw'},
                    {'title':'456','url':'http://mp.weixin.qq.com/s/lgSquXMHI82C8oNnB4hBUw'},
                    {'title':'789','url':'http://mp.weixin.qq.com/s/lgSquXMHI82C8oNnB4hBUw'}
                ],
                recommandDatas:{
                    is_hot:1,
                    bt_img:'https://www.51jili.com/attachment/display/3310',
                    b_projecttitle:'推荐标题',
                    Rate:'10',
                    loandeadline:'12',
                    IncreasedRate:7.1,
                    b_need_loan:123456,
                    b_can_cast_loan:654321,
                    canrsecoupon:1,
                    b_assignbiddding:0,
                    progress:99

                }
            }
        },
        components:{
            indexHeader
        },
        created(){
            
        },
        mounted(){
        	this.init()
        },
        computed: {

        },
        methods: {
            openUrl,
        	init(){
                //dom渲染完成后创建轮播和公告栏
                this.$nextTick(()=>{
                    //轮播加载
                    banner = new Swiper('.swiper-container',{
                        direction: 'horizontal',
                        loop: true,
                        speed:300,
                        autoplay:3000,
                        pagination: '.swiper-pagination',
                    })
                    //公告加载
                    platform = new Swiper('.platform-marquee-container',{
                        direction: 'vertical',
                        loop: true,
                        speed:300,
                        autoplay:3000,
                        noSwiping : true,
                    })
                    drawCircle()
                })
				
        	}
        },

    }

</script>

<style lang="scss" scoped>
    @import '../../../assets/css/mixin.scss';
    // .topHeader{
    //     position:fixed;
    //     top:0;
    //     left:0;
    //     width:100%;
    //     z-index:1000;
    // }
    footer{
        padding:10px;
        background:#edf3f8;
    }
    h1{
        background:blue;
    }
    header{
        color:red
    }
    .swiper-slide{
        height:200px;
        background:#fff;
        background-repeat: no-repeat;
	    background-size: 100% 100%;
    }
    .platform{
        padding:10px;
        background:#edf3f8;
        .platform-marquee{
            padding:10px 10px 10px 50px;
            font-size:16px;
            background:#fff url('../../../assets/images/laba.png') no-repeat 10px 10px;
            border:1px solid #bfd7e7;
            @include borderRadius(20px);
            height:48px;
            .platform-marquee-container{
                height:26px;
                overflow: hidden;
            }
            ul{
                position:relative;
                li{
                    height:26px;
                    line-height:26px;
                    overflow: hidden;
                    color:#666;
                }
            }
        }
        .platform-advantage{
            width:100%;
            padding:15px 5px;
            @include fj;
            div{
                text-align: center;
                width:25%;
                img{
                    width:60px
                }
                h6{
                    margin-top:5px;
                    font-size:12px;
                }
            }
        }
    }
    .item-recommend{
        background:#fff;
        >.title{
            padding:30px 10px;
            >span{
                line-height: 36px;
                display:inline-block;
                height:36px;
                color:#4f83be;
                font-size: 22px;
                vertical-align: middle;
            }
        }
        img{
            display:inline-block;
            height:36px;
            vertical-align: middle;
        }
    }
    .hot{
        font-weight:bold!important;
        background-image: -webkit-linear-gradient(top, #ffe88b, #fff 30%, #fff);
        >.title{
            background:url('../../../assets/images/hot-web01.png') no-repeat top right; 
        }
    }
    .detail-info{
        position:relative;
        text-align: center;
        .progress{
            padding-top: 50px;
            font-size: 20px;
            color: #666;
            line-height: 30px;
            padding-bottom: 5px;
            >small{
                font-size: 20px;
                color:  $fc;
                line-height: 30px;
            }
        }
        .shouyilv{
            width: 150px;
            margin: 0 auto;
            padding-top: 5px;
            border-top: 1px dashed #eeeeee;
            font-size: 20px;
            color: #999999;
        }
        .shouyilv-num{
            font-size:20px;
            >i{
                font-size: 60px;
                color: $bc;
                font-style:normal;
            }
            >em{
                font-style:normal;
                color: $bc;
                font-size: 24px;
            }
        }
        .time{
            display: inline-block;
            width: 150px;
            height: 50px;
            margin-top: 10px;
            line-height: 50px;
            border: 1px solid #eeeeee;
            color: #666;
            font-size: 20px;
            border-radius: 30px;
            span{
                color:#4f83be;
            }
        }
    }
    #canvas{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        display:block;
        margin:0 auto;
    }
    .item-recommend-pay{
        text-align:center;
        padding-bottom:30px;
        ul{
            padding: 30px 0 20px;
            li{
                float:left;
                width: 50%;
                border-right: 1px solid #eee;
                position: relative;
                >h2{
                    font-size:30px;
                    color:#333;
                    line-height:36px;
                }
                >p{
                    color: #666;
                    font-size: 14px;
                    line-height: 24px;
                }
            }
            li:last-child {
                border-right: none;
            }
        }
        >a{
            display: inline-block;
            width: 80%;
            border-radius: 30px;
            height: 44px;
            line-height: 44px;
            color: #fff;
            font-size: 20px;
            background: #ef4646;
            position: relative;
        }
    }
</style>
